﻿<html>
	<head>
		<style>
			*{margin:0 auto;padding: 0}
			body{background-color:#000;}
			#header{width:425px;margin:50px auto}
			#content{width:1024px;height:800px;margin:20px auto}
     			#content #status{
				float:left;
				width:250px;
				height:300px;
				margin:auto 20px;
				border:2px solid #fff;
				font-family:'微软雅黑';
				font-size:20px;
				color:#fff;
                                line-height:50px;
				text-align:center;
				padding-top:100px;
			}
			#content #workspace{
				width:700px;
				height:400px;
				border:1px solid #fff;
				float:right;
			}
			#content #workspace #player,#content #workspace #computer{
				width:220px;
				float:left;
				margin:10px 60px;
			}
			
			#content #workspace #text{
				float:left;
				width:60px;
				font-family:'微软雅黑';
				color:#fff;
			}
			#content #workspace #pic{
				float:left;
				width:140px;
				margin-right:20px;
			}
			#content #workspace #clickqu{
				clear:both;
				width:550px;
				height:200px;
				margin-bottom:5px;
				border:2px solid #fff;
				position:relative;
			}
			#content #workspace #clickqu img{
				position:absolute;
			}
			#content #workspace #clickqu #pic1{
				left:20px;
				top:20px;
			}
			#content #workspace #clickqu #pic2{
				left:190px;
				top:20px;
			}
			#content #workspace #clickqu #pic3{
				left:360px;
				top:20px;
			}
		</style>
	</head>
	<body>
		<div id="header">
			<img src="images/title.png"/>
		</div>
		<div id="content">
			<div id="status">
				<p id="sum">总的局数:0</p>
				<p id="success">胜利局数:0</p>
				<p id="fail">失败局数:0</p>
				<p id="eval">打平局数:0</p>
			</div>
			<div id="workspace">
				<div id="chuquan">
					<div id="player">
						<div id="text"><h2>玩</h2><br /><h2>家</h2></div>
						<div id="pic"><img id="pimg" src="images/shitou.png"/></div>
					</div>
					<div id="computer">
						<div id="pic"><img id="cimg" src="images/shitou.png"/></div>
						<div id="text"><h2>电</h2><br /><h2>脑</h2></div>
					</div>
				</div>
				<div id="clickqu">
					<a href="#"><img id="pic1" src="images/jiandao.png" onclick="j()"/></a>
					<a href="#"><img id="pic2" src="images/shitou.png" onclick="s()"/></a>
					<a href="#"><img id="pic3" src="images/bu.png" onclick="b()"/></a>
				</div>
			</div>
		</div>
	</body>
<script>

	var pimg = document.getElementById('pimg');
	
	var cimg = document.getElementById('cimg');
	// 分别获取 用户和电脑的结果元素 
	var arr = ['images/jiandao.png','images/shitou.png','images/bu.png']
	// 准备一个数组存放图片的路径 
	var num;  // 准备一个容器用来存放随机数 
	var person; // 准备一个容器 用来存放 用户出的结果 012 剪刀石头布
	var win = 0; // 准备一个变量用来存放赢得次数 
	var ping = 0; // 准备一个变量用来存放平得次数 
	var fail = 0; // 准备一个变量用来存放输得次数 
	var alls = 0; // 总局数 
	// 剪刀  用户出电脑做的事情  
	function j(){
		person = 0;  // 只要用户点击剪刀  将0放到 person中 
		pimg.src = arr[0]; // 根据下标0 拿到数组中图片的路径 并赋值到用户结果区域
		num = Math.floor(Math.random()*3);  // 生成电脑的随机数  012
		cimg.src = arr[num]; // 随机数当做索引 赋值给 电脑结果区域
		setTimeout("game_result()",10);  
		//
	}	

	// 石头
	function s(){
		person = 1
		pimg.src = arr[1];
		num = Math.floor(Math.random()*3);
		cimg.src = arr[num];
		setTimeout("game_result()",10);
		// 10毫秒以后获取最终的输赢 局数等结果 
	}


	// 布
	function b(){
		person = 2;
		pimg.src = arr[2];
		num = Math.floor(Math.random()*3);
		cimg.src = arr[num];
		setTimeout("game_result()",10);
	}
	

	function game_result(){
		// 0  2
		// 1  0
		// 2  1
		alls++;  // 只要game_result alls 就加1  

		document.getElementById('sum').innerHTML = `总的局数:${alls}`
		// 获取元素并将结果赋值给该元素 
		if(person == 0 && num == 2 || person == 1 && num == 0 || person == 2 && num == 1){
			win++;
			document.getElementById('success').innerHTML = `胜利局数:${win}`
		}
		else if(person == num){
			ping++;
			document.getElementById('eval').innerHTML =  `打平局数:${ping}`
		}
		else{
			fail++;
			document.getElementById('fail').innerHTML =  `失败局数:${fail}`
		}
	
	}
</script>
</html>